<template>
  <HeadTail :fauserid="idnum"></HeadTail>
  <div
    class="mx-auto w-11/12 flex 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base"
  >
    <div
      class="wewh w-1/12 ml-0 mr-0 mt-20 text-center justify-center 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base;"
    >
      <div class="wew" style="color: #969696">首页</div>
      <div class="wew" @click="tosanscks">分类</div>
      <div class="wew" @click="tostore">收藏</div>
      <div class="wew" @click="toorder">订单</div>
    </div>
    <div
      class="pt-0 ml-0 mt-16 w-11/12 text-center 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base"
    >
      <div
        class="h-20 texio w-full flex 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base"
      >
        <span :class="{ wewetrue: isActive, wewe: hasError }" @click="addlist1">
          主食
        </span>
        <span class="wewe" @click="addlist2">小吃</span>
        <span class="wewe" @click="addlist3">甜品</span>
        <span class="wewe" @click="addlist4">饮品</span>
      </div>
      <div
        class="weseui w-full mt-9 text-center justify-center flex-wrap flex 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base"
      >
        <div class="wewes" @click="gtocar(item)" v-for="(item, index) in list">
          <div
            class="rounded-full flex overflow-hidden mx-auto 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base sm:w-[120px] sm:h-[120px] xl:w-[200px] xl:h-[200px]"
          >
            <img :src="item.img.split(',')[1]" alt="" class="w-full" />
          </div>
          <span>{{ item.productName }}</span>
        </div>
        <div class="w-full">
          <div
            class="w-full 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base"
          >
            <el-carousel :interval="5000" arrow="always" height="220px">
              <el-carousel-item v-for="item in lun" :key="item.id">
                <img :src="item.img" alt="" class="w-full h-full" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.texio {
  border-bottom: 3px solid black;
}

.weseui {
  height: 248px;
}

.wettr {
  height: 200px;
  overflow: hidden;
  border-radius: 18px;
  margin: auto;
}

.wett {
  height: 220px;
  position: relative;
}

.wew {
  height: calc(100% / 4);
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}

.wewh {
  height: 489px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: none;
}

.wewetrue {
  color: #969696;
  width: calc(100% / 4);
}

.wewe {
  color: black;
  width: calc(100% / 4);
}

.wewes {
  margin-bottom: 64px;
  width: calc(100% / 4);
}

.wewesh {
  width: 72px;
  height: 72px;
}
</style>
<script setup>
import HeadTail from "@/components/Nhome/HeadTail.vue";
import { ref, reactive, onMounted, watchEffect } from "vue";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
let isActive = false;
let hasError = true;
let ifShow = ref(false);
let list = ref([]);
let lun = reactive([
  { id: 1, img: "https://pic1.imgdb.cn/item/6472e7c3f024cca173435f36.png" },
  { id: 2, img: "https://pic1.imgdb.cn/item/6472e7c3f024cca173435ff9.png" },
  { id: 3, img: "https://pic1.imgdb.cn/item/6472e7c3f024cca17343607c.png" },
  { id: 4, img: "https://pic1.imgdb.cn/item/6472e7c3f024cca173435eb6.png" },
]);
function gtocar(item) {
  router.push({
    name: "Card",
    query: {
      item: JSON.stringify(item),
      userid: JSON.stringify(idnum.value),
    },
  });
}
let current = ref("主食");
function addlist1() {
  current.value = "主食";
}
function addlist2() {
  current.value = "小吃";
}
function addlist3() {
  current.value = "甜品";
}
function addlist4() {
  current.value = "饮料";
}
const route = useRoute();
let idnum = ref('');
let username = ref();
onMounted(() => {
  idnum.value = route.query.id;
  axios
    .get(
      `http://1.14.126.98:8081/product/productsByCategory?current=1&size=8&category=主食`
    )
    .then((res) => {
      list.value = res.data;
    });
});
watchEffect(() => {
  if (current.value == "主食") {
    axios
      .get(
        `http://1.14.126.98:8081/product/productsByCategory?current=1&size=8&category=${current.value}`
      )
      .then((res) => {
        list.value = res.data;
      });
  } else if (current.value == "小吃") {
    axios
      .get(
        `http://1.14.126.98:8081/product/productsByCategory?current=1&size=8&category=${current.value}`
      )
      .then((res) => {
        list.value = res.data;
      });
  } else if (current.value == "甜品") {
    axios
      .get(
        `http://1.14.126.98:8081/product/productsByCategory?current=1&size=8&category=${current.value}`
      )
      .then((res) => {
        list.value = res.data;
      });
  } else if ((current.value = "饮料")) {
    axios
      .get(
        `http://1.14.126.98:8081/product/productsByCategory?current=1&size=8&category=${current.value}`
      )
      .then((res) => {
        list.value = res.data;
      });
  }
});
function tosanscks() {
  router.push({ name:"SanscksPane",query: {
      userid: idnum.value,
    },});
}
function tostore() {
  router.push('StoreUp')
}
function toorder() {
  router.push('OrderForm')
}
</script>
